<template>
  <div class="check-box flex flex-ai-c">
    <div
      :style="boxStyle"
      @click="checkBox"
      class="icon cursor-pointer flex flex-ai-c flex-js-c">
      <svg-icon
        v-show="props.active"
        name="check"
        color="#fff"
        size="0.8em"
      />
    </div>
    <slot></slot>
  </div>
</template>

<script lang="ts" setup>
  import { defineProps, defineEmits, computed } from 'vue';

  let props = defineProps({
    /*是否选中*/
    active: {
      type: Boolean,
      default: false,
    },
    /*默认大小*/
    size: {
      type: Number,
      default: 16,
    },
    /*选择后的颜色*/
    checkColor: {
      type: String,
      default: "#222",
    },
    /*未选择颜色*/
    defaultColor: {
      type: String,
      default: "#fff",
    }
  });

  const boxStyle = computed(() => ({
    width: props.size + 'px',
    height: props.size + 'px',
    backgroundColor: props.active ? props.checkColor : props.defaultColor,
  }));

  const emit = defineEmits(["update:active"]);

  const checkBox = () => emit("update:active", !props.active);
</script>

<style lang="scss" scoped>
  .check-box {
    .icon {
      border-radius: 2Px;
      border: 1px solid #4D4D4D;
      background-color: #FFFFFF;
      margin-right: 4Px;
    }
  }
</style>